<template>
  <div>
    <header>
      <div class="fubox">
        <div class="fudong">
          <router-link class="fuxia" to="/home/cardadmin/cardstock">~返回用户列表</router-link>
        </div>
      </div>
      <div class="her">
        <div class="demo-input-suffix">
          <span>用户ID:</span>
          <el-input placeholder="ID" style="width: 140px;" v-model="tableData2.userid">
          </el-input>
        </div>
        <div class="demo-input-suffix">
          <span>用户手机号:</span>
          <el-input placeholder="手机号" style="width: 140px;" v-model="tableData2.iphone">
          </el-input>
        </div>
        <!-- 区域选择框 -->
        <div>区域:</div>
        <div>
          <el-select v-model="tableData2.quyu" slot="prepend" placeholder="请选择" style="width:130px;">
            <el-option label="单人明区" value="单人明区"></el-option>
            <el-option label="单人暗区" value="单人暗区"></el-option>
            <el-option label="双人区(靠窗)" value="双人区(靠窗)"></el-option>
          </el-select>
        </div>
        <div>渠道:</div>
        <div>
          <el-select v-model="tableData2.qudao" slot="prepend" placeholder="请选择" style="width:130px;">
            <el-option label="微信" value="微信"></el-option>
            <el-option label="余额" value="余额"></el-option>
            <el-option label="兑换码" value="兑换码"></el-option>
            <el-option label="时长兑换" value="时长兑换"></el-option>
          </el-select>
        </div>

        <div>
          <el-button class="but" type="info" @click="cha">查询</el-button>
        </div>
        <div>
          <el-button class="but" type="info" @click="qin">清空</el-button>
        </div>
      </div>
    </header>
    <div>
      <el-table :data="tableData" style="width: 100%" max-height="650">
        <el-table-column fixed prop="userid" label="ID" sortable width="100">
        </el-table-column>
        <el-table-column prop="iphone" label="手机号" width="140">
        </el-table-column>
        <el-table-column prop="quyu" label="区域" width="130">
        </el-table-column>
        <el-table-column prop="quyu" label="名称" sortable width="130">
        </el-table-column>
        <el-table-column prop="goumaishij" label="卡券获得时间" sortable width="150">
        </el-table-column>
        <el-table-column prop="huode" label="卡券过期时间" sortable width="150">
        </el-table-column>
        <el-table-column prop="qudao" label="卡券获得渠道" sortable width="150">
        </el-table-column>
        <el-table-column prop="jia" label="价格" sortable width="120">
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage3" :page-size="5" :pager-count="100" layout="prev, pager, next, jumper"
        :total="tableData3.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from '../../utils/http'
import { toRefs, reactive, computed } from 'vue'
export default {
  setup () {
    const data1 = reactive({
      tableData3: [],//表格数据
      tableData: [],//表格数据
      tableData2: {
        userid: '',//用户ID
        iphone: '',//用户手机号
        quyu: '',//区域名称
        qudao: ''//渠道选择
      },
      //分页数据
      currentPage3: 1,
      tiao: 5,//分页条数
      bu: computed(() => //获取所有表格数据
        $http({
          url: '/buyhistory',
          data: {},
          method: 'post'
        }).then((data2) => {
          data1.tableData3 = data2.data.data
          data1.shijchul()
          data1.handleCurrentChange()
        })
      ),
      //时间格式处理
      shijchul: () => {
        for (let i = 0; i < data1.tableData3.length; i++) {
          let e = data1.tableData3[i].goumaishij
          let y = data1.tableData3[i].huode
          let x = (e || "").split('T')
          let v = (y || "").split('T')
          data1.tableData3[i].goumaishij = x[0]
          data1.tableData3[i].huode = v[0]
        }
      },
      //查询点击按钮
      cha: () => {
        let a = data1.tableData2
        $http({
          url: '/buyhistory2',
          data: { a },//userid,iphone,quyu,qudao
          method: 'post'
        }).then((data2) => {
          data1.tableData3 = data2.data.data
          data1.shijchul()
          data1.handleCurrentChange()
        })
      },

      //清空输入框
      qin: () => {
        data1.tableData2.userid = '',
          data1.tableData2.iphone = '',
          data1.tableData2.quyu = '',
          data1.tableData2.qudao = '',
          data1.cha()
      },
      //分页条数
      handleSizeChange: (val) => {
        console.log(`每页 ${val} 条`);
      },
      //分页页数
      handleCurrentChange: (val) => {
        if (val === undefined) {
          val = 1
        }
        data1.tableData = data1.tableData3.slice((val * 5) - 5, val * 5)
        data1.currentPage3 = val
      },
      paixu:()=>{
        console.log(1);
      }
    })
    return { ...toRefs(data1) }
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.fubox {
  height: 30px;
  overflow: hidden;

}

.fudong {
  float: left;
}

.fuxia {
  text-decoration: none;
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
  color: #000;
}

.fuxia:hover {
  color: rgb(5, 128, 205);
}

.fudong2 {
  float: right;
  background: rgb(2, 167, 240);
  color: rgb(250, 248, 248);
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
}

.block {
  float: left;
}

.her {
  display: flex;
  background: rgb(215, 215, 215);
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 40px;
}

.her div {
  margin: 0 5px 0 0;
}

.but {
  margin: 0 0 0 20px;
}
</style>